<template>
	<view>
		<view>
			<y-tabs v-model="getType" @change="tabChange" swipeable sticky :offsetTop="offsetTop" animated
				color="#2979ff" tab-click-scroll-top>
				<y-tab v-for="item in tabList" :key="item.id" :title="item.name">
					<block v-if="getType === 0">
						<block v-if="equipmentRecord.length > 0">
							<view v-for="(item,index) in equipmentRecord" :key="item.id" style="margin-top: 20rpx;">
								<uni-card :is-shadow="false" is-full :border="false">
									<template v-slot:title>
										<uni-section class="mb-10" :title="'设备名称：'+ item.mac_info.name" type="line">
											<template v-slot:right>
												<u-tag text="故障申报" @click="failureDeclare(item)"></u-tag>
											</template>
										</uni-section>
									</template>
									<uni-list :border="true">
										<uni-list-item :thumb="imgBaseurl+item.mac_info.m_front_image_url"
											thumb-size="lg">
											<template v-slot:body>
												<u-row>
													<u-col span="12">
														<u--text type="info" :text="item.mac_info.desc"></u--text>
													</u-col>
												</u-row>
											</template>
										</uni-list-item>
									</uni-list>
								</uni-card>
							</view>
						</block>
						<block v-else>
							<u-empty marginTop="200">
							</u-empty>
						</block>
					</block>
					<block v-if="getType === 1">
						<block v-if="failure.length > 0">
							<view v-for="(item,index) in failure" :key="item.id" style="margin-top: 20rpx;">
								<uni-card :is-shadow="false" is-full :border="false">
									<template v-slot:title>
										<uni-section class="mb-10" :title="'设备名称：'+ item.mac_info.name" type="line">
											<template v-slot:right>
												<u-tag v-if="item.st == 0" text="申请中" plain></u-tag>
												<u-tag v-if="item.st == 1" text="设备正常" plain type="success" />
												<u-tag v-if="item.st == 2" text="已报废" plain type="warning" />
												<u-tag v-if="item.st == 3" text="已撤销" plain type="error" />
											</template>
										</uni-section>
									</template>
									<uni-list :border="true">
										<uni-list-item :thumb="imgBaseurl+item.mac_info.m_front_image" thumb-size="lg">
											<template v-slot:body>
												<u-row>
													<u-col span="12">
														<u--text type="info" :text="item.desc"></u--text>
													</u-col>
												</u-row>
											</template>
										</uni-list-item>
									</uni-list>
								</uni-card>
							</view>
						</block>
						<block v-else>
							<u-empty marginTop="200">
							</u-empty>
						</block>
					</block>
				</y-tab>
			</y-tabs>
			<!-- 弹窗 -->
			<u-popup :show="showFailurePopup" mode="center" :round="10" @close="closeFailurePopup" closeable
				@open="openFailurePopup" :safeAreaInsetBottom="false" bold>
				<view style="padding: 20rpx;width: 500rpx;">
					<u--text color="#3c9cff" text="问题描述" align="center" margin="20rpx 0"></u--text>
					<uni-easyinput type="textarea" autoHeight v-model="failureDesc" placeholder="请输入问题描述"
						:maxlength="300" trim="all"></uni-easyinput>
					<button type="primary" @click="setMyMachineRecord"
						style="margin: 30rpx 0 0 0;background-color: #3c9cff;">提交</button>
				</view>
			</u-popup>
		</view>
		<u-loading-page loading-mode="semicircle" :loading="showLoading"></u-loading-page>
	</view>
</template>

<script>
	import {
		getEquipmentRecordApi,
		setMyMachineRecordApi,
		getMyMachineRecordApi
	} from '@/api/index.js'
	export default {
		components: {

		},
		data() {
			return {
				tabList: [
					// '我的设备', '故障申报记录'
					{
						id: 1,
						name: '我的设备',
					}, {
						id: 2,
						name: '故障申报记录',
					}
				],
				getType: 0,
				page: 1,
				pageSize: 6,
				pageFlag: false,
				equipmentRecord: [],
				failure: [],
				showFailurePopup: false,
				failureInfo: {},
				failureDesc: '',
				imgBaseurl: getApp().globalData.config.appInfo.imgBaseurl,
				showLoading: true,
				offsetTop: 0, //粘性定位布局下与顶部的最小距离
			}
		},
		onLoad(e) {
			console.log(e);
			this.getEquipmentRecord();

		},
		onShow() {

		},
		mounted() {
			uni.getSystemInfo({
				success: (e) => {
					let offsetTop = 0
					// #ifdef H5
					offsetTop = 43
					// #endif
					this.offsetTop = offsetTop;
				}
			})
		},
		methods: {
			tabChange(index) {
				this.getType = index;
				this.page = 1;
				this.pageFlag = false;
				this.showLoading = true;
				if (index === 1) {
					this.getMyMachineRecord()
				} else {
					this.getEquipmentRecord()
				}
			},
			tabClick(index) {
				console.log(index);
			},
			// 获取设备列表
			async getEquipmentRecord(next) {
				try {
					const {
						data: res
					} = await getEquipmentRecordApi({
						page: this.page,
						pageSize: this.pageSize
					});
					const equipmentRecord = res.results
					const newEquipmentRecordList = next ?
						this.equipmentRecord.concat(equipmentRecord) :
						equipmentRecord
					this.equipmentRecord = newEquipmentRecordList
					this.showLoading = false;
					// console.log('设备列表', res);
				} catch (e) {
					//TODO handle the exception
					console.log(e);
					if (e === 404) {
						uni.hideToast()
						this.pageFlag = true;
					}
				}

			},
			// 获取故障申报记录
			async getMyMachineRecord(next) {
				try {
					const {
						data: res
					} = await getMyMachineRecordApi({
						page: this.page,
						pageSize: this.pageSize
					});
					// console.log(res);
					const machineRecord = res.results
					const newMachineRecordList = next ?
						this.failure.concat(machineRecord) :
						machineRecord
					this.failure = newMachineRecordList
					this.showLoading = false;
					// console.log('获取故障申报记录', res);
				} catch (e) {
					console.log(e);
					if (e === 404) {
						uni.hideToast()
						this.pageFlag = true;
					}
				}
			},
			failureDeclare(item) {
				this.openFailurePopup();
				this.failureInfo = item;
			},
			// 故障申报
			async setMyMachineRecord() {
				try {
					const {
						m_sn,
						id,
						st,
						uid
					} = this.failureInfo
					if (!this.failureDesc) {
						uni.showToast({
							title: '请输入问题描述',
							icon: 'none'
						})
						return
					}
					let params = {
						desc: this.failureDesc,
						m_sn,
						mr_id: id,
						st,
						uid
					}
					const res = await setMyMachineRecordApi(params);
					console.log('故障申报', res);
					if (res === 201) {
						this.closeFailurePopup();
						uni.showToast({
							title: '故障申报成功'
						})
						this.getType = 1;
						this.getMyMachineRecord()
					}
				} catch (e) {
					console.log('异常', e);
				}
			},
			// 打开申报弹窗
			openFailurePopup() {
				this.showFailurePopup = true;
			},
			// 关闭
			closeFailurePopup() {
				this.failureDesc = "";
				this.showFailurePopup = false;
			},
			// 页面滚动触发事件
			onPageScroll(e) {
				console.log('页面滚动触发事件');
				//页面滚动事件
				uni.$emit('onPageScroll', e)
			},

		},
		onReachBottom() {
			// console.log('触底');
			if (this.getType === 0) {
				if (!this.pageFlag) {
					this.page = this.page + 1
					this.getEquipmentRecord(true)
				}
			} else if (this.getType === 1) {
				if (!this.pageFlag) {
					this.page = this.page + 1
					this.getMyMachineRecord(true);
				}
			}
		},
	}
</script>

<style>

</style>